<template>
  <div class="user-edit">
    <!-- Modal -->
    <!-- :styles="{top: '50%',transform: 'translateY(-50%)','border-radius': '15px',height: '80%','overflow-y': 'auto'}" -->
    <Modal
      :title="title"
      v-model="visible"
      width="1000"
      :styles="{top: '20px','border-radius': '15px'}"
      :mask-closable="type == '0'"
      scrollable=true
      transfer
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <!-- <div class="drawer-header">
          <div style="margin-right: 16px">基本信息</div>
        </div> -->
       <Form
          ref="form"
          :model="form"
          :rules="ruleValidate"
          label-position="top"
        >
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="服务序号：" prop="code">
                <Input v-model="form.code" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="服务名称：" prop="title">
                <Input v-model="form.title" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="服务图标:" class="form-noheight" prop="icon">
                <upload-pic-input v-model="form.icon"></upload-pic-input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="服务内容：" prop="description">
                <Input v-model="form.description" />
              </FormItem>
            </Col>
          </Row>
         
          <!-- <Divider /> -->
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" :loading="submitLoading" @click="submit">保存</Button>
        <Button size="large" @click="visible = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  scMeetRoomServeAdd
} from "@/api/index";
import {
  validateUsername,
  validateMobile,
  validatePassword,
} from "@/libs/validate";
// import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
// import SetPassword from "@/views/my-components/xboot/set-password";
// import dict from "@/views/my-components/xboot/dict";
export default {
  name: "user",
  components: {
    // departmentTreeChoose,
    uploadPicInput,
    // SetPassword,
    // dict,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      showIntegralScale: false,
      yuanqu: '', //园区里外
      roleList: [],
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
     
      form: {
        // address: [],
        
      },
      
      ruleValidate: {
        code: [
          { required: true, message: "请输入服务序号", trigger: "blur" }
        ],
        title: [
          { required: true, message: "请输入服务名称", trigger: "blur" }
        ],
        icon: [
          { required: true, message: "请选择服务图标", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入服务内容", trigger: "blur" }
        ],
      },
      
      
    };
  },
  methods: {
    init() {
      
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          scMeetRoomServeAdd(this.form).then(res => {
            console.log(res)
            if (res.success) {
              this.$Message.success("操作成功")
              this.visible = false
              this.$emit("on-submit", true);
            }
          })
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑用户";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加服务管理";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "用户详情";
        this.maxHeight = "100%";
      }
      
      this.form = {}
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
.add-content{
  display: flex;
  .label{
    width: 100px;
    margin-top: 6px;
  }
  .form-item{
    display: flex;
    flex: 1;
    justify-content: space-between;
    .ivu-form-item{
      margin-right: 20px;
    }
  }
  .ivu-form-item{
    flex: 1;
  }
  .ivu-btn{
    margin-right: 0;
  }
}
</style>

